<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div class="pay-container">
    <div class="order-info-box">
      <p>订单号:{{orderNo}}</p>
      <span><p>商品总价:</p><p class="money">{{totalPrice | currency '¥'}}</p></span>
    </div>
    <div class="line"></div>
    <div class="acount-info-box">
      <div class="acount-info-item">
        <img src="http://static.52letsgo.cn/zz/wechatimg/ic_favorable.png" alt="">
        <p>优惠:</p>
        <p class="money">{{freePrice | currency '¥'}}</p>
      </div>
      <div class="line"></div>
      <div class="acount-info-item">
        <img src="http://static.52letsgo.cn/zz/wechatimg/ic_account.png" alt="">
        <p>账号余额:</p>
        <p class="money">{{accountMoney | currency '¥'}}</p>
      </div>
    </div>
    <div class="division"></div>
    <div class="pay-title-box">
      <p>需支付:</p>
      <p class="money">{{(totalPrice-freePrice) | currency '¥'}}</p>
    </div>
    <div class="line"></div>
    <div class="pay-box">
      <div @click="acountPay" class="pay-item">
        <div class="pay-type">
          <img src="http://static.52letsgo.cn/zz/wechatimg/ic_pay_balance.png" alt="">

          <p>余额支付</p>
        </div>
        <img v-if="payType == 1" src="http://static.52letsgo.cn/zz/wechatimg/ic_day_unselected.png" alt="">
        <img v-if="payType == 0" src="http://static.52letsgo.cn/zz/wechatimg/ic_day_selected.png">
      </div>
      <div class="line"></div>
      <div @click="wxPay" class="pay-item">
        <div class="pay-type">
          <img src="http://static.52letsgo.cn/zz/wechatimg/ic_pay_weixin.png" alt="">
          <p>微信支付</p>
        </div>
        <img v-if="payType == 1" src="http://static.52letsgo.cn/zz/wechatimg/ic_day_selected.png" alt="">
        <img v-if="payType == 0" src="http://static.52letsgo.cn/zz/wechatimg/ic_day_unselected.png" alt="">
      </div>
      <div class="line"></div>
    </div>
    <div class="btn-box">
      <div @click="pay" class="pay-btn">付款</div>
    </div>
  </div>
</template>
<script>
  import {openid} from './../../vuex/getters.js'
  import {set_openid} from './../../vuex/actions.js'

  var Global = require('./../../commons/js/Global');
  var Cart = require('./../../commons/js/Cart');
  var MyRequire = require('./../../commons/js/MyRequest');
  var LocalStorageUtils = require('./../../commons/js/LocalStorageUtil');
  export default{
    data(){
      return {
        payType: 0,//支付类型 0余额支付，1微信支付
        accountMoney: 0,
        freePrice: 0,
        goodsCount: 0,
        orderId: 0,
        orderNo: 0,
        orderTime: 0,
        totalPrice: 0,
        weiPay: "",
      }
    },
    ready: function () {
      Global.closeLoading();
      var user = LocalStorageUtils.getItem("User");
      this.accountMoney = user.money;
      this.freePrice = this.$route.query.freePrice;
      this.goodsCount = this.$route.query.goodsCount;
      this.orderId = this.$route.query.orderId;
      this.orderNo = this.$route.query.orderNo;
      this.orderTime = this.$route.query.orderTime;
      this.totalPrice = this.$route.query.totalPrice;
    },
    vuex: {
      getters: {
        openid
      },
      actions: {
        set_openid
      }
    },
    methods: {
      acountPay(){
        this.payType = 0;
        this.testParams = "账号余额支付";
      },
      wxPay(){
        this.payType = 1;
        this.testParams = "微信支付";
      },
      pay(){
        if (this.payType == 1) {
          //微信支付
          var user = LocalStorageUtils.getItem("User");
          var city = LocalStorageUtils.getItem("city");
          var cityId = user.cityId;
          if (city) {
            cityId = city.id;
          }

          var data = {
            orderType: 1,
            userId: user.id,
            orderNo: this.orderNo,
            cityId: cityId,
            platform: "TOUCH",
            wechatOpenid: this.openid,
            version: Global.getVersion()
          }
          MyRequire.MyPostWithToast("PayBean", this, function (result, that) {
              if (result.success){
                that.weiPay = result.data.weiPay;
                that.isWeixinJSBridge();
              }
          }, data);
        } else if (this.payType == 0) {
          //余额支付
          var data = {
            orderNo: this.orderNo,
            action: "pay"
          };
          MyRequire.MyPostWithToast("Pay", this, function (result, that) {
            if (result.success) {
              that.$router.replace({path: '/orderList'})
            }
          }, data);
        }
      },
      isWeixinJSBridge(){
        console.log("isWeixinJSBridge");
        if (typeof WeixinJSBridge == "undefined") {
          console.log("isWeixinJSBridge is undefined");
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
          }
        } else {
          console.log("isWeixinJSBridge not undefined");
          this.onBridgeReady();
        }
      },
      onBridgeReady(){
        var that = this;
        WeixinJSBridge.invoke("getBrandWCPayRequest", {
            "appId": that.weiPay.appId,     //公众号名称，由商户传入
            "timeStamp": that.weiPay.timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr": that.weiPay.nonceStr, //随机串
            "package": "prepay_id=" + that.weiPay.prepayId,
            "signType": "MD5",         //微信签名方式：
            "paySign": that.weiPay.paySign //微信签名
          }
          , function (res) {
            //that.$router.replace({path: '/orderList'})
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              that.$router.replace({path: '/orderList'})
            }
          });
      }
    }
  }
</script>
<style lang="less">
  @import './pay.less';
</style>
